React-Router Hooks

✒️ 2025-05-28 10:30 내용 수정

• React-Router에서 사용하는 Hook 중에서 URL에 연관있는 Hook을 정리했다.
• 참고 자료 : React Router

1. useHref

• <Link to="/경로">에서 사용될 수 있는 경로를 반환한다.
  • port 이후 혹은 도메인 이후 /로 시작하는 부분을 반환한다.
  • 참고자료 : React Router useHref
  • URL(Uniform Resource Locator) 참고.

import { useHref } from "react-router-dom";

function Test() {
	let url = useHref();
	console.log(url);
	
	return ()
}

• 요청 url을 param과 queryString을 혼합해서 보낸다.
  

• 반환 결과는 localhost:3000 이후의 url이며,query string은 제외되었다.
  

• 만약 요청 url을 얻고 싶다면 window.location.href를 사용하면 된다.

import { useHref } from "react-router-dom";

function Test() {
	let url = useHref();
	console.log(url); // 경로를 반환
	
	let currentUrl = window.location.href;
	console.log(currentUrl);

	return ()
}

2. useSearchParams

• url의 query 부분의 값을 반환한다.
  • 참고 자료 : ReactRouter useSearchParams, stackoverflow How to get parameter value from query string

import { useSearchParams } from "react-router-dom";

function Test() {
	let [searchParams, setSearchParams] = useSearchParams();
	console.log(`page : ${searchParams.get("page")}`)
	console.log(`index : ${searchParams.get("index")}`)
	
	return()
}

• 요청 url을 param과 queryString을 혼합해서 보낸다.
  
• page와 index의 값이 반환 되었다.
  

3. useParams

• 현재 url에서 <Route path>로부터 전달된 동적 param의 key/value 쌍을 반환한다.
  • 참고 자료 : ReactRouter useParams

import './App.css';
import { Route, Routes } from 'react-router-dom';
// .. 생략

function App() {
  return (
    <>
	<Routes>
	  <Route path="/user/:id" element={<User/>}>
		<Route path="product" element={<Product/>}/>
		<Route path="review" element={<ReviewList/>}/>
	  </Route>
	</Routes>
    </>
  );
}

export default App;

import { useParams } from "react-router-dom";

function ReviewList() {
	const val = useParams();
	console.log(val);
	
	return ()
}

• 요청 url을 param과 queryString을 혼합해서 보낸다.
  ![[searchform 3.PNG]]

• 반환 결과는 Object로, Object에는 <Route>에서 지정한 동적 param인 id와 그 값을 가지고 있다.